<%--
  Created by IntelliJ IDEA.
  User: HKemmm
  Date: 2021/4/23
  Time: 13:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>Ajax数据查询</title>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="static/plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css">

    <%--    pagination分页插件css样式--%>
    <link rel="stylesheet" href="static/plugins/Pagination2.1.5/pagination.css">

    <link href="static/views/Hplus-v.4.1.0/css/style.css?v=4.1.0" rel="stylesheet">

    <!--jquery的框架：一定要先导入，因为bootstrap的框架需要使用jquery-->
    <script src="static/plugins/jquery-1.12.4/jquery-1.12.4.min.js" type="text/javascript"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="static/plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript"></script>

    <!--    pagination分页插件js脚本-->
    <script src="static/plugins/Pagination2.1.5/pagination.min.js"></script>


    <script type="text/javascript">

        function doQuery() {
            $.ajax({
                type: "POST",
                url: "ajaxdemo4",
                data: $("#queryform").serialize(),
                datatype: "JSON",
                success: function (data) {
                    // 遍历 data json对象
                    //console.log(data);


                    if (data) {

                        //分页插件数据绑定
                        $('#pagerbar').pagination({
                            dataSource: data, // 分页插件绑定ajax查询的结果集
                            pageSize: 10, // 每页显示的记录条数
                            showGoInput: true, // 是否显示 go 的跳转输入框
                            showGoButton: true,  // 是否显示 go 的跳转按钮
                            callback: function (pagedata, pagination) {  // 分页的回调函数，用于显示分页的每一页的数据
                                // 解析分页插件中显示的每一页的pagedata，进行数据显示
                                // 显示的数据内容
                                var strShowData = "";
                                // 开始进行遍历data  json对象
                                $.each(pagedata, function (i, eachRow) {
                                    strShowData += "<tr>"
                                    strShowData += "<th scope='row'>" + (i + 1) + "</th>"
                                    strShowData += "<td>" + eachRow.username + "</td>"
                                    strShowData += "<td>" + eachRow.useraddress + "</td>"
                                    strShowData += "<td>" + eachRow.usertel + "</td>"
                                    strShowData += "<td>" + eachRow.userregdate + "</td>"
                                    strShowData += "<td><img src='" + eachRow.userimg + "'style='width: 30px;height: 30px'/></td>"
                                    strShowData += '<td><a class="btn btn-default" role="button" onclick="showModal(' + eachRow.userid + ')">修改</a></td>'
                                    strShowData += '<td><a class="btn btn-default" onclick="return confirm(\'请确认是否删除该记录？\')" role="button">删除</a></td>'
                                    strShowData += "</tr>"
                                });

                                // 将要显示的内容写到控件中
                                $("#showData").html(strShowData);

                            }
                        })

                    }

                },
                error: function () {
                    alert("数据错误！");
                }
            });
        }

        function ajaxAdd() {

            // 使用jquery的serialize方法并不能处理，包含文件流的表单，这时，需要使用 FormData 的dom对象；
            // FormData是dom对象，而不是jquery对象；
            // 使用FormData进行文件上传操作，创建一个FormData对象（注意将jquery对象转换为dom对象）
            var formData = new FormData($("#insertuser")[0]);

            $.ajax({
                type: "POST",
                url: "ajaxinsert",
                data: formData, //$("#insertform").serialize(), // post请求的数据参数例如： userId=1&userName=zhangsan

                // 使用FormData对象作为ajax发送服务器的数据载体，需要设置以下两个参数
                contentType: false, // 防止request请求位置文件头上下文对象，如果进行处理，则会丢失文件流对象
                processData: false, // 防止request请求自动处理ForamData对象，如果进行处理，则会丢失文件流对象

                datatype: "JSON",// 服务器响应的内容类型
                success: function (date) {
                    //alert(date);
                    if (date) {
                        //console.log(date);
                        if (date && date == "ok") {
                            alert("用户信息保存成功！");
                            // 关闭modal，并调用ajax查询，显示刚才修改的数据记录
                            $('#insertModal').modal('hide');
                            // 查询显示信息
                            doQuery();
                        }
                    }
                },
                error: function () {
                    alert("用户信息保存失败!")
                }
            });
        }

        function showModal(userid) {

            if (userid) {
                $.getJSON("selectByKey?userid=" + userid, function (data) {

                    //console.log(data.userregdate);

                    $('#userName-insert').val(data.username);
                    $('#userAddress-insert').val(data.useraddress);
                    $('#userPsw-insert').val(data.userpsw);
                    $('#userPsw2-insert').val(data.userpsw);
                    $('#userTel-insert').val(data.usertel);
                    $('#userRegiste-insert').val(data.userregdate);

                    //隐藏表单域，存储用户id
                    $('#userid').val(data.userid);
                });
            } else {
                //console.log("新增");
                //reset只能清空可见控件值，隐藏控件不能清空
                $('#insertuser')[0].reset();

                $('#userid').val(null);
            }

            $('#insertModal').modal('show');
        }

    </script>
</head>
<body>
<div class="ibox-content">
    <form class="form-horizontal" id="queryform">
        <div class="form-group">
            <label class="col-sm-2 control-label">用户名</label>

            <div class="col-sm-2">
                <input type="text" id="userName" name="username" class="form-control">
                <span class="help-block m-b-none" id="user-name-label" style="color: red"></span>
            </div>

            <label class="col-sm-2 control-label">住址</label>

            <div class="col-sm-2">
                <input type="text" id="useraddress" name="useraddress" class="form-control">
                <span class="help-block m-b-none" id="user-address-label" style="color: red"></span>
            </div>

        </div>

        <div class="hr-line-dashed"></div>

        <div class="form-group">
            <label class="col-sm-2 control-label">联系电话</label>

            <div class="col-sm-2">
                <input type="text" id="userTel" name="usertel" class="form-control">
                <span class="help-block m-b-none" id="user-tel-label" style="color: red"></span>
            </div>

            <label class="col-sm-2 control-label">注册日期</label>
            <div class="col-sm-5">
                <div class="col-sm-5">
                    <input type="date" id="userRegisteDate" name="userregdate" placeholder="选择开始日期"
                           class="form-control">
                </div>
                <div class="col-sm-1">
                    -
                </div>
                <div class="col-sm-5">
                    <input type="date" id="userRegisteDate2" name="userregdate2" placeholder="选择截止日期"
                           class="form-control" style="float:none;">
                </div>
            </div>

        </div>
        <div class="hr-line-dashed"></div>
        <div class="form-group">
            <div class="col-sm-4 col-sm-offset-2">
                <button class="btn btn-primary" type="button" onclick="doQuery()">查询</button>
            </div>

            <div class="col-sm-2 col-sm-offset-2">
                <button class="btn btn-primary" type="button" onclick="showModal()">新增</button>
            </div>
        </div>
    </form>


    <div class="bs-example" data-example-id="hoverable-table">
        <table class="table table-hover">
            <thead>
            <tr>
                <th>序号</th>
                <th>用户名</th>
                <th>住址</th>
                <th>联系电话</th>
                <th>注册日期</th>
                <th>头像</th>
                <th>修改</th>
                <th>删除</th>
            </tr>
            </thead>
            <tbody id="showData">


            </tbody>
        </table>
    </div>
    <div id="pagerbar"></div>
</div>

<%----------------------------------------------模态框开始---------------------------------------------------------%>
<div id="insertModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content" style="width: 1000px; right: 30%;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">

                <%--    enctype="multipart/form-data"  表示表单中有文件--%>
                <form id="insertuser" enctype="multipart/form-data" class="form-horizontal">
                    <input type="hidden" id="userid" name="userid">

                    <div class="form-group">
                        <label class="col-sm-2 control-label">用户名</label>
                        <div class="col-xs-5 col-md-4">
                            <input type="text" id="userName-insert" name="username" class="form-control">
                            <span class="help-block m-b-none" id="user-name-insert-label" style="color: red"></span>
                        </div>

                        <label class="col-sm-2 control-label">住址</label>
                        <div class="col-xs-5 col-md-4">
                            <input type="text" id="userAddress-insert" name="useraddress" class="form-control"
                                   name="password">
                            <span class="help-block m-b-none" id="user-address-insert-label" style="color: red"></span>
                        </div>


                    </div>

                    <div class="hr-line-dashed"></div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">密码</label>
                        <div class="col-xs-5 col-md-4">
                            <input type="password" id="userPsw-insert" name="userpsw" class="form-control">
                            <span class="help-block m-b-none">密码由字母、数字、特殊符号组成</span>
                            <span class="help-block m-b-none" id="user-psw-insert-label" style="color: red"></span>
                        </div>

                        <label class="col-sm-2 control-label">确认密码</label>
                        <div class="col-xs-5 col-md-4">
                            <input type="password" id="userPsw2-insert" name="userpsw2" class="form-control">
                            <span class="help-block m-b-none">密码由字母、数字、特殊符号组成</span>
                            <span class="help-block m-b-none" id="user-psw2-insert-label" style="color: red"></span>
                        </div>

                    </div>

                    <div class="hr-line-dashed"></div>
                    <!--
                            <div class="form-group" id="data_3" >
                                <label class="col-sm-2 control-label font-noraml">10年视图</label>
                                <div class="input-group date col-xs-6 col-md-4" style="padding-left: 16px">
                                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                    <input type="text" id="userregdate" name="userregdate" class="form-control" value="2014-11-11">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">注册日期</label>
                                <div class="col-xs-6 col-md-4">
                                    <input type="text"  id="userregdate" name="userregdate"   class="form-control">

                                </div>

                            </div>
                    -->

                    <div class="form-group">
                        <label class="col-sm-2 control-label">联系电话</label>
                        <div class="col-xs-5 col-md-4">
                            <input type="text" id="userTel-insert" name="usertel" class="form-control">
                            <span class="help-block m-b-none" id="user-tel-insert-label" style="color: red"></span>
                        </div>

                        <label class="col-sm-2 control-label">注册日期</label>
                        <div class="input-group date col-xs-5 col-md-4" style="padding-left: 16px">
                            <input type="date" id="userRegiste-insert" name="userregdate" placeholder="选择日期"
                                   class="form-control">
                            <span class="help-block m-b-none" id="user-date-label" style="color: #ff0000"></span>
                        </div>
                    </div>

                    <div class="hr-line-dashed"></div>

                    <div class="form-group">

                        <label class="col-sm-2 control-label">图片</label>
                        <div class="col-xs-4 col-md-4">
                            <input type="file" id="userImg-insert" name="file-userimg" class="form-control">
                            <span class="help-block m-b-none" id="user-img-insert-label" style="color: #ff0000"></span>
                        </div>
                    </div>
                </form>


            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="ajaxAdd()">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
</html>
